<template>
  <div id="container">
    <div class="pane_container">
      <div class="btn-box" @click="changeMap(0)">影像地图</div>
      <div class="btn-box" @click="changeMap(1)">电子地图</div>
      <div class="btn-box" @click="changeMap(2)">地形图</div>
      <div class="btn-box" @click="handleClear">清除轨迹</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount} from 'vue'
import * as Cesium from 'cesium';
import * as MapWorks from './map-work'
import {uuid, calcAngle} from "../../utils/index";
const props = defineProps({
  coords: {
    type: Array,
    default: () => [122.22127,30.26678, 100]
  },
  hpr: {
    type: Object,
    default: () => {
      return {
        heading: 0,
        pitch:-90,
        roll: 0
      }
    }
  }
})
const entitiesCacheObj = MapWorks.entitiesCacheObj
const init = () => {
  let container = document.getElementById("container");
  MapWorks.initMap(container)
  MapWorks.changeBaseMap(0)
  MapWorks.setView(props.coords, props.hpr)
  const position = Cesium.Cartesian3.fromDegrees(
      104.0634012222290039,
      30.6598806381225586,
      30
  )
  //朝向（弧度单位）
  var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, {
    heading: 0,
    pitch:0,
    roll: 0
  });
}

const changeMap = (index) => {
  MapWorks.changeBaseMap(index)
}
const changeDronePosition = (sn, pos) => {
  MapWorks.drawAircraf(sn, pos)//绘制飞行器
  MapWorks.drawLine(sn, entitiesCacheObj[sn].prevPos, pos)//绘制路径线
  const pointEntity = MapWorks.drawOutlinePoint(sn, pos, 1)//绘制路径点
  entitiesCacheObj[sn].prevPos = pos
  /* 路径点动画 */
  const fadeScaleIn = () => {
    MapWorks.pointFadeScaleAnimation(pointEntity, 1, 10, 3000, 0, () => {
      fadeScaleOut()
    })
  }
  const fadeScaleOut = () => {
    MapWorks.pointFadeScaleAnimation(pointEntity, 0.1, 1, 3000, 0, () => {
      fadeScaleIn()
    })
  }
  fadeScaleIn()
}
const simulateMove = (sn) => {
  const points = [
    [122.22127,30.26678, 120],
    [122.22309,30.26878, 120],
    [122.2219,30.2706, 120],
    [122.22127,30.27177, 120],
    [122.21971,30.27179, 120],
    [122.21654,30.27126, 120],
    [122.21466,30.27099, 120],
    [122.21245,30.27065, 120],
    [122.21245,30.269, 120],
    [122.21457,30.26478, 120]
  ]
  let i = 0;
  const size = points.length
  let intv = setInterval(() => {
    if (i >= size - 1) {
      clearInterval(intv)
      intv = null
    } else {
      changeDronePosition(sn, points[i])
      i++
    }
  }, 2000)
}
const handleClear = () => {
  MapWorks.clearAircrafPointAndLine(droneSn)
}
const dockSn = '7PDETERTYWW'
const droneSn = '1578YTREBUSBB345Y'
onMounted(() => {
  init()
  MapWorks.drawDock(dockSn, '秀山镇 镇府', [122.21466,30.27099, 120])
  setTimeout(() => {
    simulateMove(droneSn)
  }, 6000)
  // setTimeout(() => {
  //   deviceEntities.xxx001.billboard.rotation = Cesium.Math.toRadians(90.0)
  // }, 8000)
})

onBeforeUnmount(() => {
  MapWorks.destroy();
})
</script>

<style lang="less" scoped>
#container{
  width: 100%;
  height: 100%;
  background: rgba(7, 12, 19, 1);
  overflow: hidden;
  background-size: 40px 40px, 40px 40px;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.05) 1px, transparent 0);
  .pane_container{
    position: absolute;
    left: 10px;
    top: 50px;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
    z-index: 2;
    display: flex;
    .btn-box{
      border-radius: 5px;
      margin-left: 10px;
      padding: 2px 10px;
      background: rgba(0,0,0,0.7);
      font-size: 14px;
      color: #fff;
    }
  }
}


</style>
